import React, { useState } from 'react';
import request from '@/http';
import {
  Row,
  Col,
  Form,
  Select,
  Input,
  Button,
  DatePicker,
  Table,
  Radio,
  Spin,
  message,
  Popconfirm,
} from 'antd';
import moment from 'moment';
import { history } from 'umi';
const { Option } = Select;
interface DataType {
  key: React.Key;
  name: string;
  age: number;
  address: string;
}

export default function index() {
  const [formObject] = Form.useForm(); //获取数据
  const [value, setvalue] = useState(true);
  const onChange = () => {
    // console.log(value)
    setvalue(!value);
    // console.log(value)
    if (value) {
    } else if (!value) {
    }
  };
  const tableTitle: any[] = [
    //数据表头
    { title: '题目', dataIndex: 'title', width: 350 },
    { title: '题型', dataIndex: 'type'},
    { title: '科目', dataIndex: 'subjectName'},
    { title: '分值', dataIndex: 'score'},
    { title: '正确答案', dataIndex: 'trueAnswer'},
    {
      title: '操作',
      dataIndex: 'tags',
      key: 'tags',
      render: (text: any, record: any) => (
        <>
        <Popconfirm
          title="确定删除本道题目吗?"
          onConfirm={async () => {
            await request.post('/api/Topic/TopicDelete?Id='+record.Id).then((response:any)=>{
              if(response.code==200){
                getData( 1, 5);
                message.success(response.message)
              }else{
                message.error(response.message)
              }
              })
          }}
          okText="确认"
          cancelText="取消"
        > 
          <Button
                  type="link"
                  // onClick={async () => {
                  //   await request.post('/api/Topic/TopicDelete?Id='+record.Id).then((response:any)=>{
                  //     if(response.code==200){
                  //       getData( 1, 5);
                  //       message.success(response.message)
                  //     }else{
                  //       message.error(response.message)
                  //     }
                  //     })
                  // }}
                >
                  删除
                </Button>
        </Popconfirm>
          
        </>
      ),
    },
  ];

  const [pagination, setPagination] = React.useState({
    //分页器
    showSizeChanger: true,
    pageSizeOptions: ['5', '10', '50', '200', '500'],
    showQuickJumper: true,
    defaultPageSize: 5,
    showTotal: (total: any, current: any) =>
      `共 ${total} 条记录  第 ${current[0]}/${current[1]} 页`,
  });

  const [dataSource, setDataSource] = React.useState<any[]>();//数据集合
      const getData=async (   
        pageValue: any,
        pageSizeValue: any                        
        ) => {
          await request.get('/api/Topic/GetAll').then((response:any)=>{
            if(response.code==200){
              const data=response.data.map((item:any,index:number)=>({
                key:index,
                'Id':item.id,
                'type':item.type.type==0?'选择':item.type.type==1?'判断':'填空',
                "title":item.title,
                "subjectName": item.course.courseName,
                "score": item.score,
                "trueAnswer":item.trueAnswer
            }))
                const newPageObject = {
                  ...pagination,
                  // current: pageValue,
                  // pageSize: pageSizeValue,
                };
                setPagination(newPageObject);
                setDataSource(data)
                setspinning(false)
            }else{
              message.error(response.message)
              setspinning(false)
            }
            })
      }
    React.useEffect(()=>{
      getData( 1, 5);
      // getSubject();
    },[])

  const [spinning, setspinning] = useState(true);

  const [SubjectData, setSubjectData] = useState([
    {
      "subjectName": null,
      "id": null
    },]);
  const getSubject=async () => {
      await request.post('/api/Subject/subjectSearch').then((response:any)=>{
        if(response.code==200){
            setSubjectData(response.slists)
        }else{
          message.error(response.message)
        }
        })
  }

  return (
<Spin spinning={spinning} size="large">
        <>
            <Row style={{marginTop:30}} justify="center">
                <Col span={22}>
                <Form
                      // initialValues={{state:0,userName:0}}
                        className="ant-advanced-search-form"
                        form={formObject}
                        onFinish={async (values:any)=>{
                          setspinning(true)
                          await request.get('/api/Topic/GetAll?typeId='+values.userName+'&subjectId='+values.state).then((response:any)=>{
                            if(response.code==200){
                              const data=response.data.map((item:any,index:number)=>({
                                key:index,
                                'Id':item.id,
                                'type':item.type.type==0?'选择':item.type.type==1?'判断':'填空',
                                "title":item.title,
                                "subjectName": item.sbject.subjectName,
                                "score": item.score,
                                "trueAnswer":item.trueAnswer
                              })
                              )
                              const newPageObject = {
                                ...pagination,
                                // current: pageValue,
                                // pageSize: pageSizeValue,
                              };
                              setPagination(newPageObject);
                              setDataSource(data)
                              setspinning(false)
                              message.success(response.message);
                            }else{
                              setspinning(false)
                              message.success(response.message);
                            }
                          })
                        }}
                        >
                          <Row gutter={24}>

                          <Col span={6}>
                          <Form.Item label="科目" name="state">
                              <Select placeholder='请选择'>
                              {SubjectData
                                ? SubjectData.map((item: any, index: any) => {
                                    return (
                                      <Option
                                        index={index}
                                        key={index}
                                        value={item.id}
                                        children={item.subjectName}
                                      />
                                    );
                                  })
                                : ''}
                              </Select>
                            </Form.Item>
                          </Col>

                          <Col span={6}>
                          <Form.Item label="题型" name="userName">
                          <Select placeholder='请选择'>
                                <Option value={1} key={0}>选择</Option>
                                <Option value={2} key={1}>判断</Option>
                                <Option value={3} key={2}>填空</Option>
                              </Select>
                            </Form.Item>
                          </Col>
                          <Col span={6} >
                            <Button type="primary" htmlType="submit">
                              查询
                            </Button>
                            <Button
                              style={{ margin: '0 8px' }}
                              onClick={() => {
                                formObject.resetFields();
                              }}
                            >
                              重置
                            </Button>
                          </Col>
                          </Row>
                    </Form>
                </Col>
                <Col span={22} offset={1}>
                    <Button style={{ marginBottom: '10px' }} type="primary" onClick={() => {
                    history.push('addQuestion')
                    }}
                    >新增题目</Button>
                    <Table
                        columns={tableTitle}
                        dataSource={dataSource}
                        pagination={pagination}
                        // onChange={pageOnChange}//分页、排序、筛选变化时触发(用以重新获取数据)
                        tableLayout="fixed"
                        
                    />
                </Col>
            </Row>
        </>
        </Spin>
  );
}